<template>
  <div>
    <!-- 最外层容器 -->
    <el-container>
      <!-- 顶栏 -->
      <el-header class="layout-header">
        <div class="login-user">
          <span class="welcome">欢迎回来，XXX！</span>
          <el-avatar shape="square" size="medium" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
          <el-button class="logout" type="primary" round @click="logout()">退出登录</el-button>
        </div>
        <h1>猫眼管理员登录系统</h1>
      </el-header>
      <!-- 下半部分的容器 -->
      <el-container class="layout-body">
        <!-- 左侧边栏 -->
        <el-aside class="layout-aside">
          <el-menu
              router
              :default-active="$router.currentRoute.path"
              class="el-menu-vertical-demo"
              background-color="#3a4856"
              text-color="#fff"
              active-text-color="#fff">
            <!-- 主页 -->
            <el-menu-item index="/adminindex">
              <i class="el-icon-s-home"></i>
              <span>主页</span>
            </el-menu-item>
            <!-- 账号管理 -->
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>影院管理</span>
              </template>
              <el-menu-item index="/CIM">
                  <i class="el-icon-location"></i>
                  <span>影院信息管理</span>
              </el-menu-item>
              <el-menu-item index="2-2">
                <i class="el-icon-location"></i>
                <span>影院区域管理</span>
              </el-menu-item>
              <el-menu-item index="2-3">
                <i class="el-icon-location"></i>
                <span>影院品牌管理</span>
              </el-menu-item>
            </el-submenu>
            <!-- 内容管理 -->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>电影管理</span>
              </template>
              <el-menu-item index="3-1">
                <i class="el-icon-location"></i>
                <span>电影信息管理</span>
              </el-menu-item>
              <el-menu-item index="3-2">
                <i class="el-icon-location"></i>
                <span>电影评论管理</span>
              </el-menu-item>
              <el-menu-item index="3-3">
                <i class="el-icon-location"></i>
                <span>电影区域管理</span>
              </el-menu-item>
              <el-menu-item index="3-5">
                <i class="el-icon-location"></i>
                <span>电影类别管理</span>
                <el-menu-item index="3-6">
                  <i class="el-icon-location"></i>
                  <span>电影播放时段管理</span>
                </el-menu-item>
              </el-menu-item>
            </el-submenu>
            <!-- 商城管理 -->
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>影厅管理</span>
              </template>
              <el-menu-item index="/admin/mall/category/add-new">
                <i class="el-icon-location"></i>
                <span>影厅信息管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/category">
                <i class="el-icon-location"></i>
                <span>影厅类别管理</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>场次管理</span>
              </template>
              <el-menu-item index="/admin/mall/category/add-new">
                <i class="el-icon-location"></i>
                <span>场次信息管理</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/admin/mall/category/add-new">
                <i class="el-icon-location"></i>
                <span>用户信息管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/category/add-new">
                <i class="el-icon-location"></i>
                <span>订单信息管理</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>权限管理</span>
              </template>
              <el-menu-item index="/admin/mall/category/add-new">
                <i class="el-icon-location"></i>
                <span>管理员信息管理</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧主体 -->
        <el-main class="layout-main">
          <div class="body">
            <!-- 页面的主体部分将由其它视图组件来显示 -->
            <router-view/>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
body {margin: 0;}
.layout-header { background: #28292e; color: #fff; }
.layout-header h1 { margin: 0; line-height: 60px; font-size: 20px; }
.layout-header .login-user { float: right; display: flex; margin-top: 12px; }
.layout-header .login-user .welcome { line-height: 36px; }
.layout-header .login-user .logout{margin-top: -2px;margin-left: 100px}
.layout-body { position: absolute; top: 60px; bottom: 0; left: 0; right: 0; }
.layout-aside { background: #3a4856; }
.layout-aside i { color: #fff !important; }
.layout-aside .el-menu { border: 0; }
.layout-main { background: #ddd; }
.layout-main .body { background: #fff; padding: 30px 30px 10px 30px; }
.layout-main .copyright p { color: #666; font-size: 11px; text-align: center; }
.el-menu-item.is-active { background: #405872 !important; }
</style>

<script>
export default {
  name: 'HomeView',
  methods: {
    logout() {
      this.$router.push('/adminlogin')
    }
  }
}
</script>
